﻿<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { Status } from '@/utils/http/types.d'
import { ConditionSelectorParams } from '@/types/modules/fixed-assets-consuming'
import { approvalStatusOptions } from '@/types/modules/approval-status'

const props = defineProps({
  formState: {
    type: Object as PropType<ConditionSelectorParams>,
    default: () => ({} as ConditionSelectorParams)
  },
  layout: {
    type: String,
    default: 'inline'
  }
})

const {
  value: { labelCol, isHorizontal }
} = computed(() => {
  const isHorizontal = props.layout === 'horizontal'
  let labelCol: any = isHorizontal
    ? { xl: { span: 4 }, md: { span: 6 }, xs: { span: 7 } }
    : { style: { width: '120px', marginBottom: '20px' }, span: 8 }
  return {
    labelCol,
    isHorizontal
  }
})

const { t } = useI18n()
const emit = defineEmits(['search'])

const formRef = ref()
const rules = {}

const resetForm = () => {
  formRef.value.resetFields()
  emit('search')
}
</script>
<template>
  <a-form ref="formRef" name="advanced_search" v-bind="{ rules, layout, labelCol }" :class="{ isHorizontal }"
    :model="formState" labelAlign="right" :labelWrap="true" @finish="emit('search')">
    <a-form-item name="keywords" label="关键词" :class="{ isInline: !isHorizontal }">
      <a-input v-model:value="formState['keywords']" placeholder="请输入关键词" allow-clear />
    </a-form-item>
    <a-form-item name="statusSelector" label="审批状态" :class="{ isInline: !isHorizontal }">
      <a-select v-model:value="formState['statusSelector']" :options="approvalStatusOptions"
        :field-names="{ value: 'value', label: 'displayName' }" :get-popup-container="(node: any) => node.parentNode"
        placeholder="请选择" show-arrow allow-clear />
    </a-form-item>
    <a-col :span="23" style="width: 100%; text-align: right">
      <a-form-item class="form-btn">
        <a-button type="primary" html-type="submit">{{
            t('system.search')
        }}</a-button>
        <a-button @click="resetForm">{{ t('system.reset') }}</a-button>
      </a-form-item>
    </a-col>
  </a-form>
</template>
<style lang="less" scoped>
.isHorizontal {
  margin: auto;
  width: 40vw;
}

.ant-form-item {
  margin-right: 0;

  &.isInline {
    width: 430px;
  }

  .ant-picker,
  .ant-input-number {
    width: 100%;
  }
}

.form-btn {
  .ant-btn {
    margin-right: 20px;
  }
}
</style>
